<template>
  <div class="my-followed-display">
    <div @click="toUserCenter(user.userId)" class="my-followed-display-avatar">
      <el-avatar :size="50" :src="user.userAvatar" />
    </div>
    <div class="my-followed-display-nameAndDesc">
      <div class="my-followed-display-username">
        <el-text>{{ user.userName }}</el-text>
      </div>
      <div class="my-followed-display-desc">
        <el-text class="w-150px mb-2" truncated>
          {{ user.userDesign }}
        </el-text>
      </div>
    </div>

    <div class="my-followed-display-isFollow">
      <div v-if="user.id === userId">
        <el-button size="default" v-if="user.isFollowed">
          <div class="is-followed" @click="cancelFollow">已互关</div>
        </el-button>
        <el-button size="default" v-else
          ><div class="is-followed" @click="cancelFollow">
            未互关
          </div></el-button
        >
      </div>
      <div v-else>
        <el-button size="default" v-if="user.isFollowed">
          <div class="is-followed" @click="cancelFollow">已关注</div>
        </el-button>
        <el-button size="default" v-else
          ><div class="is-followed" @click="follow">关注</div></el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { cancelFollow, follow } from "@/api/userCenter";
import { ElMessage } from "element-plus";

export default {
  props: {
    user: {
      type: Object,
      required: true,
    },
  },
  computed: {
    userId() {
      return this.$store.state.user.userInfo.userId;
    },
  },
  methods: {
    async cancelFollow() {
      const res = await cancelFollow(this.user.userId);
      if (res.data.success) {
        this.$message({
          message: "取消关注成功",
          type: "success",
        });
        location.reload();
      }
    },

    async follow() {
      const res = await follow(this.user.userId);
      if (res.data.success) {
        ElMessage({
          type: "success",
          message: "关注成功",
        });
        location.reload();
      }
    },

    // 跳转到个人中心
    toUserCenter(id) {
      window.open("/#/home/userCenter/" + id + "/myComments");
    },
  },
};
</script>

<style>
.my-followed-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.my-followed-display-avatar {
  margin-left: 10px;
  width: 50px;
}
.my-followed-display-nameAndDesc {
  display: grid;
  margin-left: 10px;
  width: 500px;
}
.my-followed-display-username {
  width: 500px;
}
.my-followed-display-desc {
  width: 500px;
}
.my-followed-display-isFollow {
  display: flex;
  justify-content: center;
  margin-right: 10px;
  width: 100px;
}
.is-followed {
  width: 70px;
}
</style>